<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试vue</title>
		<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<div id="app" class="container">		
			
			<table class="table table-striped"> 
				<thead>
					<tr>
						<th>商品</th>
						<th>数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="product in products">
						<td>{{product.productName}}</td>
						<td>{{product.nums}}</td>
						<td>
							<a href="#nowwhere">编辑</a>
							<a href="#nowwhere" @click="deleteProduct(product.id)">删除</a>
						</td>
					</tr>
					
					<tr>
						<td colspan="3">
							<!--<form class="form-inline">-->
						  <div class="form-group">
						    <label for="product">商品：</label>
						    <input type="text" class="form-control" id="product" v-model="product4add.productName" placeholder="请输入商品名称">
						  </div>
						  <div class="form-group">
						    <label for="number">数量：</label>
						    <input type="text" class="form-control" id="number" v-model="product4add.nums" placeholder="请输入商品数量">
						  </div>
						  <button type="submit" @click="add" class="btn btn-default">增加</button>
						<!--</form>-->
						</td>
					</tr>			
				</tbody>
			</table>
		</div>
		
		<script type="text/javascript">
			
			var data = {
				products: [
					{
						id:1,
						productName: "裙子",
						nums: 50
					},
					{
						id:2,
						productName: "上衣",
						nums: 23
					},
					{
						id:3,
						productName: "裤子",
						nums: 18
					},
					{
						id:4,
						productName: "帽子",
						nums: 9
					}
				],
				product4add: {id:0, productName:"",nums:0}
			}
			
			var maxId = 4;
			for (var i=0; i< data.products.length;i++) {
				if(data.products[i].id > maxId)
					maxId = this.products[i].id;
			}

		var vue = new Vue({
			el:'#app',
			data: data,
			methods: {
				add: function(){
					console.log("增加商品");
					maxId++;
					this.product4add.id = maxId;
					if (this.product4add.productName.length==0)
						this.product4add.productName = "product-"+this.product4add.id;
					this.products.push(this.product4add);
					this.product4add = {id:0, productName:"",nums:0}
				},
				deleteProduct: function(id){
					console.log(id)
					for(var i=0; i<this.products.length;i++){
						if (this.products[i].id == id){
							this.products.splice(i,1);
							break;
						}
					}
				}
			}
			});
		</script>
	</body>
</html>
